<template>
    <div class="box">
        <div class="title">
            <div class="text">今日参与问卷人数</div>
            <div class="btn">{{ day }}人</div>
        </div>
        <v-chart :option="option" autoresize class="charts"></v-chart>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    props: ["data", "time", "day"],
    watch: {
        data: {
            deep: true,
            immediate: true,
            handler() {
                this.option.series[0].data = this.data
            }
        },
        time: {
            deep: true,
            immediate: true,
            handler() {
                this.option.xAxis.data = this.time
            }
        }
    },
    data() {
        return {
            option: {
                // tooltip: {
                //     formatter: (params) => {
                //         this.dataList.forEach(item => {
                //             if (item.name == params.name) {
                //                 this.itemnum_b = item.num_b
                //             }
                //         });
                //         return `总数：${params.data}<br/>占比：${this.itemnum_b}%`
                //     }
                // },
                grid: {
                    top: "10%"
                },
                xAxis: {
                    type: 'category',
                    // data: ['满意', '一般', '不满意', '认同', '一般', '不认同', '规范', '一般', '不规范'],
                    data: [],
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                },
                series: [
                    {
                        label: {
                            show: true,
                            position: 'top',
                        },
                        // data: [120, 200, 150, 80, 70, 110, 130, 110, 130],
                        data: [],
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(0,223,254,.2)'
                        },
                        barWidth: "20%",
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#00DFFE' },
                                { offset: 1, color: '#084CD5' }
                            ]),
                            borderRadius: 15
                        },
                    }
                ]
            }
        }
    },
    mounted() {
        this.option.series[0].data = this.data
        this.option.xAxis.data = this.time
    }
}
</script>

<style scoped>
.box {
    width: 100%;
    /* height: 53rem; */
    height: 47rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: #fff;
    margin-left: 1rem;
}
.title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 4rem 0 1.4rem;
    box-sizing: border-box;
    flex-shrink: 0;
}
.text {
    font-size: 1.8rem;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #222222;
}
.btn {
    padding: 5px 20px;
    font-size: 1.8rem;
    font-weight: bold;
    color: #222222;
    line-height: 1em;
    border: 1px solid #006bf1;
}
.charts {
    width: 100%;
    height: 100%;
}
</style>